<template>
  <div class="smart-clip">
    <RouteTitle :isBack="true" />

    <div class="smart-clip-content">
      <div class="search-area">
        <div class="n-grid">
          <div class="n-grid-item">
            <div class="n-input-group">
              <a-button style="width: 130px">脚本名称</a-button>
              <a-input
                v-model:value="title"
                placeholder="请输入脚本名称"
                allowClear
                style="width: calc(100% - 130px)"
              />
            </div>
          </div>

          <div class="n-grid-item">
            <div class="n-input-group">
              <a-button style="width: 130px">创建时间</a-button>
              <a-range-picker
                style="width: calc(100% - 130px); border-radius: 0 5px 5px 0"
                v-model:value="dateTime"
              />
            </div>
          </div>
          <div class="n-grid-item last-gird-item">
            <div class="n-input-group grid-btn">
              <a-button
                @click="searchClick"
                type="primary"
                style="border-radius: 5px"
                ><SearchOutlined />查询</a-button
              >
              <a-button
                @click="handleReset"
                style="margin-left: 10px; border-radius: 5px"
                ><ReloadOutlined />重置</a-button
              >
            </div>
          </div>
        </div>
      </div>
      <div class="table-content">
        <div class="mb-10 flex justify-end">
          <a-button type="primary" @click="handleAdd">创建脚本</a-button>
        </div>
        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          @change="handleTableChange"
          rowKey="id"
          :loading="loading"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'title'">
              <a-space direction="vertical">
                <span>{{ record.title }}</span>
                <span>{{ record.duration }}</span>
              </a-space>
            </template>
            <template v-if="column.key === 'scene_count'">
              <a-space direction="vertical">
                <span>{{ record.scene_count }}个场景</span>
                <div class="text-ellipsis">{{ record.outline }}</div>
              </a-space>
            </template>
            <template v-if="column.key === 'tag'">
              <span>{{ record.tag?.name }}</span>
            </template>
            <template v-if="column.key === 'used_count'">
              <span>{{ record.used_count || "0" }}</span>
            </template>
            <template v-if="column.key === 'video_count'">
              <span>{{ record.video_count || "0" }}</span>
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button
                  type="link"
                  style="padding: 0; margin: 0"
                  @click="handleEdit(record)"
                  >编辑</a-button
                >
                <a-button
                  type="link"
                  style="padding: 0; margin: 0"
                  @click="handleDelete(record.id)"
                  >删除</a-button
                >
              </a-space>
            </template>
          </template>
        </a-table>
      </div>
    </div>

    <!-- 脚本 新增编辑 -->
    <ScriptSetting
      :visible="scriptVisible"
      :data="record"
      @success="handleSuccess"
      @close="handleClose"
    />
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, computed } from "vue";
import {
  ReloadOutlined,
  SearchOutlined,
  DownOutlined,
  UpOutlined,
} from "@ant-design/icons-vue";
import { useRoute, useRouter } from "vue-router";
import request from "@/common/utils/request";
import dayjs from "dayjs";
import ScriptSetting from "./modules/ScriptSetting.vue";
import { Modal } from "ant-design-vue";

export default defineComponent({
  name: "ScriptLibraryList",
  components: {
    ReloadOutlined,
    SearchOutlined,
    ScriptSetting,
  },
  setup() {
    const state = reactive({
      total: 0,
      page: 1,
      pageSize: 20,
      dataSource: [],
      columns: [
        {
          title: "脚本名称",
          key: "title",
        },
        {
          title: "场景",
          key: "scene_count",
        },
        {
          title: "使用次数",
          key: "used_count",
        },
        {
          title: "产出成片",
          key: "video_count",
        },
        {
          title: "创建时间",
          dataIndex: "created_at",
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          fixed: "right",
        },
      ],
      typeList: [],
      record: {},
      title: "",
      dateTime: "",
      scriptVisible: false,
      loading: false,
    });
    const router = useRouter();

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
    }));

    const getList = () => {
      state.loading = true;
      const params = {
        page: state.page,
        pageSize: state.pageSize,
        title: state.title || undefined,
      };

      if (state.dateTime) {
        params.start_time = dayjs(state.dateTime[0]).format("YYYY-MM-DD");
        params.end_time = dayjs(state.dateTime[1]).format("YYYY-MM-DD");
      }

      request
        .get("work_ai", "/user/shotstack/script-line/list", params)
        .then((res) => {
          if (res.list) {
            state.dataSource = res.list.data;
          }
          state.total = res.list?.total;
          state.loading = false;
        })
        .catch((err) => {
          state.loading = false;
          console.log(err);
        });
    };

    const handleTableChange = (pager) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getList();
    };

    // 搜索输入
    const searchClick = () => {
      state.page = 1;
      getList();
    };

    //清除输入框
    const handleReset = () => {
      state.title = "";
      state.dateTime = "";
      state.page = 1;
      getList();
    };

    const handleAdd = () => {
      state.record = {};
      state.scriptVisible = true;
    };

    const handleDelete = (id) => {
      Modal.confirm({
        title: () => `确定要删除吗？`,
        content: "",
        icon: () => createVNode(ExclamationCircleOutlined),
        centered: true,
        onOk() {
          request
            .del("/work_ai", "/user/shotstack/script-line/delete", {
              scriptLineId: id,
            })
            .then((res) => {
              if (res.result) {
                message.success("删除成功");
                state.page = 1;
                getList();
              }
            });
        },
        onCancel: () => {},
      });
    };

    // 编辑
    const handleEdit = (row) => {
      state.record = row;
      state.scriptVisible = true;
    };

    const handleSuccess = () => {
      state.record = {};
      state.scriptVisible = false;
      getList();
    };

    const handleClose = () => {
      state.record = {};
      state.scriptVisible = false;
    };

    getList();

    return {
      ...toRefs(state),
      pagination,
      handleTableChange,
      handleReset,
      searchClick,
      handleAdd,
      handleDelete,
      handleEdit,
      handleSuccess,
      handleClose,
    };
  },
});
</script>

<style lang="less" scoped>
.smart-clip {
  padding: 0 20px 20px 20px;
}

.smart-clip-header {
  display: flex;
  height: 220px;
  margin: 20px 0;
}

.smart-clip-header-title {
  font-size: 24px;
}

.smart-clip-header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  width: 700px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.smart-clip-header-right {
  width: calc(100% - 700px);
  margin-left: 20px;
}

.segment {
  width: 260px;
  display: flex;
  padding: 5px;
  background-color: #ff916514;
}

.segment-item {
  --n-tab-border-radius: 6px;
  overflow: hidden;
  border-radius: var(--n-tab-border-radius);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ac7e7d;
}

.active-tab {
  box-shadow: 4px 4px 10px #2878FF33;
  background-color: #fff;
  color: #2878FF;
}
.data-item {
  padding: 16px 15px;
  border-radius: 16px;
  background: #ffffff;
  min-width: 150px;
  min-height: 128px;
  flex-shrink: 0;
}
.data-value {
  font-family: DIN Alternate Bold;
  font-size: 26px;
  font-weight: 700;
  margin-top: 10px;
}
.menu-list {
  display: flex;
}
.menu-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.05);
  min-width: 180px;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  height: 220px;
  transition: all 0.3s;
}
.menu-item-icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
}
.menu-item-img {
  width: 110px;
}
.menu-item-title {
  font-size: 18px;
}
.ml-16 {
  margin-left: 16px;
}

.custom:before,
.ai-build:before {
  background: linear-gradient(
    46deg,
    #fcfcfc 0%,
    #e8e5fa 44%,
    #e8e5fa 56%,
    #e8e5fa 68%,
    #f6f6f6 100%
  );
  opacity: 0;
}

.fast:before {
  background: linear-gradient(46deg, #fcfcfc 0%, #dff5fa 56%, #fcfcfc 100%);
  opacity: 0;
}
.script:before {
  background: linear-gradient(46deg, #fcfcfc 0%, #deebff 56%, #f6f6f6 100%);
}

.menu-item:hover:before {
  opacity: 1;
}

.image_text:before {
  background: linear-gradient(
    46deg,
    #f4d0d1 0%,
    #f7efea 44%,
    #f7f0ea 56%,
    #f7efe9 68%,
    #f8e1df 100%
  );
  opacity: 0;
}
.menu-item:hover .menu-item-img,
.menu-item:hover .menu-item-title {
  transform: translateY(-5px) scale(1.05);
}
.menu-item .menu-item-img {
  width: 110px;
  transition: all 0.3s;
}
.menu-item:before {
  content: "";
  opacity: 0;
  position: absolute;
  inset: 0;
  transition: opacity 0.5s;
}
.content-title {
  font-size: 24px;
}
.n-grid {
  display: flex;
}
.search-area {
  // min-width: 1200px;
  margin-top: 10px;
  button {
    border-radius: 5px 0 0 5px;
  }
  .ss-input-affix-wrapper {
    border-radius: 0 5px 5px 0;
  }
  .ss-select {
    border-radius: 0 5px 5px 0;
  }
}
/* 当屏幕宽度大于等于 1200px 时应用的样式 */
@media screen and (min-width: 1200px) {
  /* 在这里添加针对 1200px 及以上屏幕宽度的样式 */
  .n-grid {
    display: grid;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0px, 1fr));
    gap: 20px 16px;
  }
  .last-gird-item {
    grid-column: 4 / span 1 !important;
    display: flex;
    justify-content: flex-end;
  }
}

/* 当屏幕宽度小于 1199px 时应用的样式 */
@media screen and (max-width: 1199px) {
  /* 在这里添加针对 799px 及以下屏幕宽度的样式 */
  .n-grid {
    display: grid;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 20px 16px;
    .last-gird-item {
      grid-column: 2 / span 1;
    }
  }
}
.n-grid-item {
  grid-column: span 1 / span 1;
}

.hidden-grid-item {
  display: none;
}
.n-input-group {
  display: inline-flex;
  width: 100%;
  flex-wrap: nowrap;
  vertical-align: bottom;
}
.grid-btn {
  display: flex;
  justify-content: flex-end;
}
.table-content {
  margin-top: 30px;
}
.script .mask-opacity {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.2s;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.8);
  border: 1px dashed rgba(255, 101, 98, 0.5);
}
.script:hover .mask-opacity {
  opacity: 1;
}
button {
  border-radius: 5px;
}
:deep(.ss-select-selector) {
  border-radius: 0 5px 5px 0 !important;
}
</style>
